<template>
  <div>
    <van-button
      size="small"
      type="primary"
      round
      :disabled="sendLoading"
      style="padding: 5px 16px"
      >{{
        sendLoading ? num.count + $t("login.numCode") : $t("login.haveCode")
      }}</van-button
    >
  </div>
</template>
<script setup>
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
import { defineEmits } from "vue";
import { ref, reactive } from "@vue/reactivity";
import { sendEmailCode } from "@/api/user";
const { t } = useI18n();
const props = defineProps({
  email: "",
  type: "",
});
const emit = defineEmits(["onclick"]);
let sendLoading = ref(false);
var num = reactive({
  count: 10,
});
function onclick() {
  emit("click");
}
async function onSend() {
  if (sendLoading.value) return;
  sendLoading.value = true;
  await sendEmailCode({ email: props.email, type: props.type })
    .then((res) => {
      console.log(res, sendLoading);
      if (res.code != 200) {
        sendLoading.value = false;
        return;
      } else {
        num.count = 10;
        var timer = setInterval(function () {
          console.log(1111, num.count);
          num.count--;
          if (num.count <= 0) {
            console.log(num.value);
            sendLoading.value = false;
            clearInterval(timer);
            console.log("timer", timer);
          }
        }, 1000);
        Toast(t("password.successSend"));
      }
    })
    .catch((err) => {
      console.log(err, sendLoading);
      sendLoading.value = false;
    });
}
defineExpose({
  onSend,
});
</script>
<style lang="less" scoped>
.send-btn {
  position: relative;
  top: 11px;
}
</style>
